<template>
  <div class="search_song">
    <Header title="歌曲搜索" go-back="true"></Header>
    <back-top></back-top>
    <div class="plot-wrapper">
      <div class="search">
        <div class="search-wrapper">
          <input ref="inputs" type="text" placeholder="请输入歌曲" @keyup.enter="searchVillage" v-model="keyword">
          <img class="search-icon" @click="searchVillage" src="../../../assets/Image/search@2x.png" alt="">
        </div>
      </div>
    </div>
    <div class="search_music">
      <tabs value="name1" type="line">
        <tab-pane label="单曲" name="name1">
          <div class="tabs-container">
            <ul>
               <li v-for="(song,index) in playlists" :key="index">
                 <div class="record_div">
                   {{index+1}}
                 </div>
                 <div class="record_li">
                   <p>{{song.name}}</p>
                 </div>
               </li>
              <li v-if="playlists.length===0">
                <div style="width: 100%;text-align: center">
                  <span>暂无搜索结果</span>
                </div>
              </li>
           </ul>
          </div>
        </tab-pane>
        <tab-pane label="歌手" name="name2">
          <div class="tabs-container">
            <ul>
              <li v-for="(song,index) in artists" :key="index">
                <div class="record_div">
                  {{index+1}}
                </div>
                <div class="song_img">
                  <img :src="song.img1v1Url" alt="">
                </div>
                <div class="record_li">
                  <p>{{song.name}}</p>
                </div>
              </li>
              <li v-if="artists.length===0">
                <div style="width: 100%;text-align: center">
                  <span>暂无搜索结果</span>
                </div>
              </li>
            </ul>
          </div>
        </tab-pane>
        <tab-pane label="专辑" name="name3">
          <div class="tabs-container">
            <ul>
               <li v-for="(song,index) in albumsArr" :key="index">
                 <div class="record_div">
                   {{index+1}}
                 </div>
                 <div class="song_img">
                   <img :src="song.artist.picUrl" alt="">
                 </div>
                 <div class="record_li">
                   <p>{{song.name}}</p>
                   <p>{{song.artist.name}}</p>
                 </div>
               </li>
              <li v-if="albumsArr.length===0">
                <div style="width: 100%;text-align: center">
                  <span>暂无搜索结果</span>
                </div>
              </li>
            </ul>
          </div>
        </tab-pane>
        <tab-pane label="MV" name="name4">
          <div class="tabs-container">
            <div class="song_box">
              <div class="sudoku_item" v-for="(mv,index2) in mvsArr" :key="index2" @click="goMvPlay(mv.id,mv.cover)">
                <div class="song_img" :style="{backgroundImage: 'url('+mv.cover+')'}">
                </div>
                <div class="song_number">
                  <Icon style="color: #fff;" type="ios-headset-outline"/>
                  <span>{{mv.playCount}}</span>
                </div>
                <div class="song_label">
                  <span>{{mv.artists[0].name}}</span>
                </div>
                <div class="song_text">
                  <p>{{mv.name}}</p>
                </div>
              </div>
              <div v-if="mvsArr.length===0" style="width: 100%;text-align: center">
                <span>暂无搜索结果</span>
              </div>
            </div>
          </div>
        </tab-pane>
        <tab-pane label="歌单" name="name5">
          <div class="tabs-container">
            <ul>
              <li v-for="(song,index) in songsArr" :key="index" @click="goSongPlay(song.id,song.name,song.artists[0].name,song.artists[0].img1v1Url)">
                <div class="record_div">
                  {{index+1}}
                </div>
                <div class="song_img">
                  <img :src="song.artists[0].img1v1Url" alt="">
                </div>
                <div class="record_li">
                  <p>{{song.name}}</p>
                  <p>{{song.artists[0].name}}</p>
                </div>
              </li>
              <li v-if="songsArr.length===0">
                <div style="width: 100%;text-align: center">
                  <span>暂无搜索结果</span>
                </div>
              </li>
            </ul>
          </div>
        </tab-pane>
      </tabs>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import BackTop from '../../backtop/src/main'
import {searchKeyWords} from '../../../api/node'
import {saveSongId, saveSongName, saveSingerName, saveSongUrl, saveMvCover} from '../../../api/storage'

export default {
  name: 'searchSong',
  data () {
    return {
      keyword: '',
      albumsArr: [], // 专辑
      artists: [], // 歌手
      mvsArr: [], // MV
      playlists: [], // 单曲
      songsArr: [] // 歌单
    }
  },
  methods: {
    searchVillage () {
      searchKeyWords(this.keyword).then(res => {
        // console.log(res)
        if (res.code === 200) {
          // albums：专辑   artists：歌手  mvs：MV  playlists：单曲   songs：歌单
          this.albumsArr = res.result.albums
          this.artists = res.result.artists
          this.mvsArr = res.result.mvs
          this.playlists = res.result.playlists
          this.songsArr = res.result.songs
          // console.log(this.songsArr)
        }
      })
    },
    goSongPlay (id, sname, name, url) {
      saveSongId(id)
      saveSongName(sname)
      saveSingerName(name)
      saveSongUrl(url)
      this.$router.push('/songPlay2')
    },
    goMvPlay (id, coverImage) {
      saveMvCover(coverImage)
      this.$router.push('/MVPLAY/' + id)
    }
  },
  components: {
    Header,
    BackTop
  }
}
</script>

<style lang="scss" scoped>
.search_song{
  width: 100%;
  padding-top: 50px;
  .plot-wrapper{
    width: 100%;
    background: #fff;
    .search {
      width: 100%;
      position: fixed;
      top: 50px;
      left: 0;
      background-color: #fff;
      text-align: center;
      height: 44px;
      line-height: 44px;
      .search-wrapper {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          display: inline-block;
          width: 17px;
          height: 17px;
          vertical-align: middle;
        }

      }
    }
  }
  .search_music{
    width: 100%;
    padding-top: 40px;
    ul{
      width: 100%;
      li{
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
        display: inline-flex;
        align-items: center;
        .record_div{
          font-size: 13px;
          padding: 0 10px;
        }
        .song_img{
          img{
            width: 50px;
            height: 50px;
          }
        }
        .record_li{
          width: 100%;
          padding-left: 10px;
          p:first-child{
            font-size: 14px;
          }
          p:last-child{
            color: #28a1fb;
          }
        }
      }
    }
    .song_box{
      width: 100%;
      padding: 0 10px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .sudoku_item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 33.3333%;
        height: 170px;
        padding: 5px;
        position: relative;
        .song_number{
          width: 91%;
          height: 26px;
          background:#000;
          position: absolute;
          top: 10px;
          opacity: 0.5;
          text-align: right;
          span{
            color: #fff;
            font-size: 10px;
            line-height: 26px;
            margin-right: 10px;
          }
        }
        .song_label{
          width: 91%;
          height: 26px;
          background:#000;
          position: absolute;
          opacity: 0.5;
          bottom: 60px;
          span{
            color: #fff;
            font-size: 11px;
            line-height: 26px;
            margin-left: 5px;
          }
        }
        .song_img{
          width: 100%;
          height: 100px;
          background: url("../../../assets/logo.png") no-repeat;
          background-size: 100% 100%;
        }
        .song_text{
          width: 100%;
          height: 50px;
          p{
            font-size: 12px;
            margin-top: 5px;
          }
        }
      }
    }
    .no_result{
      padding-top: 50px;
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
